<template>
	<view class="details_item bg_color pdd_bottom2">
		<view v-if="!isEnter && !isDelete">
			<view>
				<view class="tit">
					<view class="text">纠纷信息</view>
				</view>
				<Details :detalisData="detalisData" :detalisList="detalisList">
					<template #data="{ data }">
						<view class="font28" style="color: #222222">{{ list.find((item) => item.value == data.data).name }}</view>
					</template>
				</Details>
				<view class="tit">
					<view class="text">当事人信息</view>
				</view>
				<view :style="detalisData.reportStatus == 0?'margin-bottom: 16rpx':''" v-for="item in detalisData.contradictoryDisputesPartyList" :key="item.id">
					<Details :detalisData="item" :detalisList="detalisList1"></Details>
				</view>
				<view class="tit" v-if="detalisData.reportStatus == 1 || (store.isFuJing() && !store.isMe(detalisData.userId))">
					<view class="text">调解结果</view>
					<view class="xing" v-if="!detalisData.reportStatus">*</view>
				</view>
				<Form
					v-if="detalisData.reportStatus == 0 && store.isFuJing() && !store.isMe(detalisData.userId)"
					ref="formRef"
					:formList="formList"
					:formData="detalisData.rectificationResults"
				></Form>
				<Details
					v-if="detalisData.rectificationResults && detalisData.reportStatus == 1"
					:detalisData="{...detalisData.rectificationResults,reportStatus:detalisData.reportStatus}"
					:detalisList="
						formList.map((item) => {
							return {
								label: item.label,
								field: item.prop,
								slot: item.prop == 'acceptorStatus',
							};
						})
					"
				>
					<template #data="{ data }">
						<view :class="{ red: data.data == 1, green: data.data == 2, blue: data.data == 3 }" class="state_view">
							<view class="drop"></view>
							<view class="state font28">
								{{
									formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name == '上报'
										? '已上报'
										: formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name
								}}
							</view>
						</view>
					</template>
				</Details>
			</view>
			<ButtonFc :detalisData="detalisData" @shangbao="shangbao" @edit="edit" @deleteItem="(deleteShow = true), (deleteId = detalisData.id)"></ButtonFc>
		</view>
		<SubmitState v-if="isEnter" :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
		<DeleteState v-if="isDelete" :success="success1" @successReturn="fanhui" @failReturn="isDelete = false"></DeleteState>
	</view>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
</template>
<script>
import changeData from 'utils/changeData.js';
export const formList = [
	{
		label: '受理人姓名',
		prop: 'acceptorName',
		type: 'text',
		placeholder: '请输入受理人姓名',
		rules: [
			{
				required: true,
				message: '请输入受理人姓名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '职务',
		prop: 'acceptorPosition',
		type: 'text',
		placeholder: '请输入职务',
		rules: [
			{
				required: true,
				message: '请输入职务',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '工作单位',
		prop: 'acceptorUnit',
		type: 'text',
		placeholder: '请输入工作单位',
		rules: [
			{
				required: true,
				message: '请输入工作单位',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '联系方式',
		prop: 'acceptorPhone',
		type: 'text',
		placeholder: '请输入联系方式',
		rules: [
			{
				required: true,
				message: '请输入联系方式',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '调解时间',
		prop: 'acceptorTime',
		type: 'datetime',
		placeholder: '请选择时间',
		mode: 'datetime',
		rules: [
			{
				required: true,
				message: '请选择时间',
				trigger: ['change', 'blur']
			}
		],
		format: 'YYYY-MM-DD HH:mm'
	},
	{
		label: '调解情况',
		prop: 'acceptorStatus',
		type: 'popup',
		placeholder: '请选择调解情况',
		rules: [
			{
				required: true,
				message: '请选择调解情况',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		columns: [
			{ name: '已调解', value: 2 },
			{ name: '上报', value: 3 }
		]
	},
	{
		label: '情况描述（选填）',
		prop: 'acceptorContent',
		type: 'textarea',
		placeholder: '请输入内容'
	}
];
</script>
<script setup>
import Details from 'com/Details.vue';
import ButtonFc from 'com/ButtonFc.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import dayjs from 'dayjs';
import Form from 'com/Form.vue';
import changeData from 'utils/changeData.js';
import { useDetails } from 'hooks';
const formRef = ref();
const list = ref([]);
const init = async(currentPage) => {
	const res1 = await store1.getDict('contradictory_disputes');
	list.value = res1;
	const res = await api.queryById('contradictory',currentPage.options);
	if (!res.rectificationResults && !res.reportStatus) {
		res.rectificationResults = detalisData.value.rectificationResults;
	}
	setTittle('上报调节结果', '矛盾纠纷详情', res.reportStatus == 0)
	res.contradictoryDisputesPartyList.forEach((item) => (item.reportStatus = res.reportStatus));
	detalisData.value = res;
};
const { store,store1, api, fanhui, edit,setTittle } = useDetails(init, 'contradiction')
const deleteShow = ref(false);
const deleteId = ref('');
const isEnter = ref(false);
const success = ref('');
const isDelete = ref(false);
const success1 = ref('');
const shangbao = () => {
	formRef.value.submit(async () => {
		const res = await api.report('contradictory',{ ...detalisData.value.rectificationResults, eventId: detalisData.value.id });
		isEnter.value = true;
		success.value = res;
	});
};
const confirm = async () => {
	deleteShow.value = false;
	const res = await api.deleteData('contradictory',{ id: deleteId.value });
	isDelete.value = true;
	success1.value = res;
};
const detalisData = ref({
	rectificationResults: {
		acceptorName: store.users.username,
		acceptorPosition: '辅警',
		acceptorTime: dayjs().format('YYYY-MM-DD HH:mm'),
		acceptorUnit: store.users.workAddress,
		acceptorPhone: store.users.phone,
		acceptorStatus: '',
		acceptorContent: ''
	}
});
const detalisList = [
	{
		label: 'tittle',
		field: 'title'
	},
	{
		label: '所在地区',
		field: 'province'
	},
	{
		label: '详细地址',
		field: 'disputePlace'
	},
	{
		label: '发生时间',
		field: 'disputeTime'
	},
	{
		label: '类型',
		field: 'disputeType',
		slot: true
	},
	{
		label: 'content',
		field: 'disputeContent'
	}
];
const detalisList1 = [
	{
		label: '姓名',
		field: 'partyName',
		encryption: true
	},
	{
		label: '联系电话',
		field: 'partyPhone',
		encryption: true
	},
	{
		label: '身份证号',
		field: 'partyCard',
		encryption: true
	}
];
</script>

